<template>
	<view class="Box">
		<view class="avatarBox">
			<view class="avatarItem">
				<view class="itemLeft">
					头像
				</view>
				<view class="itemRight">
					<view class="logo">
						<button v-if="userinfo" class="avatar-wrapper" open-type="chooseAvatar"
							@chooseavatar="onChooseAvatar">
						</button>
						<image
							:src="userinfo.avatar ? userinfo.avatar :'https://hzdaoziji.oss-cn-hangzhou.aliyuncs.com/file400c2da68da04dd8a43653c0918ac421.png'"
							class="avatarImg"></image>
					</view>

					<u-icon color="#dddddd" name="arrow-right" size="16"></u-icon>
				</view>
			</view>
			<view class="nickName">
				<view class="text">
					昵称
				</view>
				<view class="nickNameInput">
					<input v-model="nickName" type="nickname" @blur="blur" />
				</view>
			</view>
		</view>
		<view class="quitBox" @click="quitClick">
			<image class="quitImg" src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/quitIcon.png">
			</image>
			<view class="quitText">
				退出当前账号
			</view>
		</view>
	</view>
</template>

<script>
	import WebSocketClass from '@/common/webSocket.js'

	const app = getApp()
	import {
		queryAuthentication,
		queryByUserPhoneMessageList,
		editWxUserInfo,
		queryUserInfoByPhone,
		loginOut
	} from '@/api/login.js'
	import {
		uploadImg
	} from '@/api/upload.js'

	export default {
		data() {
			return {
				nickName: "",
				userinfo: {}
			}
		},
		created() {
			this.init()
		},
		methods: {
			quitClick() {
				this.sModal('是否确认退出登录？').then(res => {
					if (app.globalData.socketObj) {
						app.globalData.socketObj.sendMsg(this.userinfo.phone)
						app.globalData.socketObj.closeSocket()
					}
					loginOut().then(res => {
						uni.clearStorageSync();
						this.userinfo = null;
						this.avatarUrl = '';
						this.nickName = '';
						this.$forceUpdate();
						uni.navigateBack({
							delta: 1,
						})
					})

				})

			},
			onChooseAvatar(e) {
				let {
					avatarUrl
				} = e.detail;
				uploadImg(avatarUrl).then(res => {
					editWxUserInfo({
						id: this.userinfo.id,
						avatar: res
					}).then(res => {
						this.avatarUrl = avatarUrl;
						this.toast('编辑成功')
					})
				})
			},
			blur(e) {
				// console.log('输出', e.detail);
				editWxUserInfo({
					id: uni.getStorageSync('userinfo').id,
					nickName: e.detail.value
				}).then(res => {
					this.toast('编辑成功')
				})
			},
			init() {
				queryUserInfoByPhone({
					phone: uni.getStorageSync("userinfo").phone,
				}).then(res => {
					this.userinfo = res
					if (res.nickName) {
						this.nickName = res.nickName
					} else {
						this.nickName = res.phone
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.Box {
		width: 100%;
		height: 100vh;
		background-color: #f2f2f2;
		padding-top: 32rpx;
	}

	.avatarBox {
		width: 686rpx;
		background: #ffffff;
		border-radius: 20rpx;
		margin: 0 32rpx;

		.avatarItem {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 24rpx 32rpx 18rpx 32rpx;
			border-bottom: 2rpx solid #eeeeee;

			.itemLeft {
				font-size: 28rpx;
				color: #212121;
			}

			.itemRight {
				display: flex;

				.logo {
					position: relative;

					button {
						position: absolute;
						width: 100%;
						height: 100%;
						top: 0;
						left: 0;
						opacity: 0;
						background-color: transparent;
					}
				}

				.avatarImg {
					width: 56rpx;
					height: 56rpx;
				}
			}
		}

		.nickName {
			display: flex;
			justify-content: space-between;
			padding: 22rpx 32rpx 20rpx 32rpx;

			.text {
				font-size: 28rpx;
			}

			.nickNameInput {
				width: 300rpx;
				text-align: right;
			}
		}

	}

	.quitBox {
		display: flex;
		position: fixed;
		bottom: 170rpx;
		left: 264rpx;

		.quitImg {
			width: 40rpx;
			height: 40rpx;
		}

		.quitText {
			font-size: 28rpx;
			font-weight: 500;
			color: #ff5e5e;
			margin-left: 14rpx;
		}
	}
</style>